<template>
  <div class="box">
    <el-carousel
      indicator-position="none"
      arrow="always"
      direction="vertical"
      :autoplay="false"
      :height="windowheight"
      ref="nop"
    >
      <!--      <el-carousel-item v-for="item in demos" :key="item.url">-->
      <el-carousel-item>
        <div class="videobox">
          <!-- 视频信息 -->
          <video
            class="video"
            ref="video"
            :src="url"
            :volume="noise"
            @click="stop"
            loop
            autoplay
          ></video>
          <!-- 播放等按钮 -->
          <!-- 进度条 -->
          <div class="progresscontrol">
            <div style="margin-right: 10px; color: white">
              {{ allt + ":" + alltime }}/{{ second + ":" + minute }}
            </div>

            <!-- 视频进度条 -->
            <el-slider v-model="videonum" @change="changevideo" :show-tooltip="false" />
          </div>
          <!-- 按钮 -->
          <div class="videocontrol">
            <div @click="pop" ref="popbutton" class="controlbutton">
              <img
                v-show="!test.isshow"
                src="@/assets/image/icon/播放图标.jpg"
                alt=""
              /><img
                v-show="test.isshow"
                src="@/assets/image/icon/暂停图标.jpg"
                alt=""
              />
            </div>
            <div style="display: flex">
              <!-- 音量 -->
              <div
                class="volumebutton controlbutton"
                ref="volumebutton"
                muted="true"
              >
                <img src="@/assets/image/icon/音量图标.jpg" alt="" />
              </div>
              <!-- 音量条 -->
              <div class="slider-demo-block">
                <el-slider v-model="num" />
              </div>
              <!-- 全屏 -->
              <div @click="full" class="controlbutton">
                <img src="@/assets/image/icon/全屏图标.jpg" alt="" />
              </div>
            </div>
          </div>
          <!-- 点赞收藏转发 -->
          <div class="toolBox">
            <!-- 点赞 -->
            <div>
              <span>{{ test.numLike }}</span
              ><img
                v-show="test.showLike"
                @click="like"
                src="@/assets/image/icon/未点赞图标.jpg"
                alt=""
              />
              <img
                v-show="!test.showLike"
                @click="unlike"
                src="@/assets/image/icon/已点赞图标.jpg"
                alt=""
              />
            </div>
            <!-- 评论 -->
            <div>
              <span>{{ test.numComment }}</span
              ><img
                @click="comment"
                src="@/assets/image/icon/未评论图标.jpg"
                alt=""
              />
            </div>

            <!-- 收藏 -->
            <div>
              <span>{{ test.numBookmark }}</span
              ><img
                v-show="test.showBookmark"
                @click="bookmark"
                src="@/assets/image/icon/未收藏图标.jpg"
                alt=""
              />
              <img
                v-show="!test.showBookmark"
                @click="unbookmark"
                src="@/assets/image/icon/已收藏图标.jpg"
                alt=""
              />
            </div>
            <!-- 转发 -->
            <div>
              <span>{{ test.numForward }}</span
              ><img
                v-show="test.showForward"
                @click="forward"
                src="@/assets/image/icon/未转发图标.jpg"
                alt=""
              />
              <img
                v-show="!test.showForward"
                @click="unforward"
                src="@/assets/image/icon/已转发图标.jpg"
                alt=""
              />
            </div>
          </div>

          <!-- 视频信息 -->
          <div class="videoInfo">
            <h3>@{{VideoInfoIndex.author_nick_name}}</h3>
            <h5>{{VideoInfoIndex.simple_context}} #demo</h5>
          </div>
        </div>

        <!-- 评论区 -->
      </el-carousel-item>
    </el-carousel>

    <div class="black" ref="black" @click="closecom"></div>
    <div class="commentbox" ref="commentbox" v-show="true">
      评论区

      <div class="comments">
        <!-- 这里没有图片先放一个div替代 -->
        <div class="commentsbackground">
          <div class="comments1" v-for="n in 10" :key="n">
            <img
              class="headerimage"
              src="@/assets/image/demo.jpg"
              alt=""
            /><span class="heardername">郝momo</span>
            <p class="headercom">这是我的第一个评论你也来试试吧</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 走马灯箭头 -->
    <div class="btndiv">
      <div class="btn1" @click="prev()">↑</div>
      <div class="btn2" @click="next()">↓</div>
    </div>
    <!-- 还没有想到该怎么写，就先写成静态页面 -->
    <!-- <video src=""></video> -->


    <!-- 视频分类 -->
    <div class="sort">分&nbsp;类</div>
    <div class="sortBox" >
      <div v-for="(item) in typeInfo" @click="getTypeVideo(item)">
                {{item.name}}
      </div>
    </div>
  </div>
</template>

<script setup>
import {ElMessage, translate} from "element-plus";
import { componentSize } from "element-plus/es/utils/props";
import { computed, ref, watch, inject, onMounted, reactive } from "vue";
import {useStore} from "vuex";
const  $store =useStore()
const test = ref({
  showLike: true,
  showComment: true,
  showBookmark: true,
  showForward: true,
  isshow: true,
  numLike: 666,
  numComment: 666,
  numBookmark: 666,
  numForward: 666,
});
const VideoInfoIndex=reactive({
  author_nick_name:"",
  simple_context:"",
  like_people:"",
  dis_like_people:"",
  collection_people:""
})
//axios
const $axios = inject("$axios");
//---
//分类
const typeInfo = reactive([{
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  name:"",
  operator_id:"",
  operator_name:"",
}])
const clickType = ref({
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  name:"",
  operator_id:"",
  operator_name:"",
})
//获得视频分类
const getAllType= ()=>{
  let getAllTypeReq = {
    page:1,
    size:50,
  }
  $axios.post("/common/video/type/all",getAllTypeReq)
      .then((res)=>{
        if (res.data.data&&res.data.data.length!=0){
          res.data.data.forEach((e,i)=>{
            typeInfo[i] = e
          })
        }
      })
}
//---
const url = ref("");
//获得视频
const VideTypeReq = ref({
  vide_type: "随机",
  size: 2,
  old_video_list: [],
});
//存放视频的地址
const VideoList = reactive([{ video_http: "" }]);
const VideoNowIndex = ref(0);
function GetVideByTypeReq() {
  $axios.post("/video/random/type", VideTypeReq.value).then((resp) => {
    let i = 0;
    resp.data.data.forEach((e) => {
      VideoList[i] = e;
      VideTypeReq.value.old_video_list[i] = e.ID;
      i++;
    });
    //赋值
    changeInfo()
  });
}
function changeInfo(){
  VideoInfoIndex.author_nick_name = VideoList[VideoNowIndex.value].author_nick_name
  VideoInfoIndex.simple_context =VideoList[VideoNowIndex.value].simple_context
  VideoInfoIndex.like_people =VideoList[VideoNowIndex.value].like_people
  VideoInfoIndex.dis_like_people =VideoList[VideoNowIndex.value].dis_like_people
  VideoInfoIndex.collection_people =VideoList[VideoNowIndex.value].collection_people
  test.value.numLike = VideoInfoIndex.like_people
  test.value.numBookmark=VideoInfoIndex.collection_people
}
onMounted(() => {
  //验证码
  GetVideByTypeReq();
  //获得分类
  getAllType()
});
//监听视频数组
watch(VideoList, (newValue, oldValue) => {
  url.value = newValue[VideoNowIndex.value].video_http;
});
//监听视频位置
watch(VideoNowIndex, (newValue, oldValue) => {
  // console.log(newValue);
  test.value.isshow = true;
  if (newValue < oldValue) {
    //点击向上箭头
    UpVideo(newValue);
  } else {
    //点击向下箭头
    DownVideo(newValue);
  }
  if (VideoList[VideoNowIndex.value] != null) {
    url.value = VideoList[VideoNowIndex.value].video_http;
  }
  changeInfo()
});
//当点击向上箭头
function UpVideo(newValue) {
  const newReqList = [];
  if (newValue == -1) {
    // 表示要请求新的数据
    $axios.post("/video/random/type", VideTypeReq.value).then((resp) => {
      //判断视频是否没有了
      if (resp.data.code == 1016) {
        //将index移动到末尾
        VideoNowIndex.value = VideoList.length - 1;
        return;
      }
      let i = 0;
      let nowVideoIndex = resp.data.data.length - 1;
      resp.data.data.forEach((e) => {
        newReqList[i] = e;
        i++;
      });
      VideoList.forEach((e) => {
        newReqList[i] = e;
        i++;
      });
      for (let i = 0; i < newReqList.length; i++) {
        VideoList[i] = newReqList[i];
        //更新oldListId
        VideTypeReq.value.old_video_list[i] = newReqList[i].ID;
      }
      VideoNowIndex.value = nowVideoIndex;
      //变动url
      // if (VideoList[VideoNowIndex.value]!=null){
      // url.value=VideoList[VideoNowIndex.value].video_http
      // }

      // console.log(url.value,"--",VideoNowIndex.value,VideoList)
      // console.log(VideTypeReq.value.old_video_list)
    });
    return;
  }
}
//当点击向下箭头
function DownVideo(newValue) {
  if (newValue == VideoList.length) {
    // 表示要请求新的数据
    $axios.post("/video/random/type", VideTypeReq.value).then((resp) => {
      //判断视频是否没有了
      if (resp.data.code == 1016) {
        //将index移动到第一
        VideoNowIndex.value = 0;
        return;
      }
      let i = VideoList.length;
      let nowVideoIndex = VideoList.length;
      resp.data.data.forEach((e) => {
        //添加到尾部
        VideoList[i] = e;
        //更新旧的oldListId
        VideTypeReq.value.old_video_list[i] = e.ID;
        i++;
      });
      VideoNowIndex.value = nowVideoIndex;
      //变动url
      // url.value=VideoList[VideoNowIndex.value].video_http
      // console.log(url.value,"--",VideoNowIndex.value,VideoList)
      // console.log(VideTypeReq.value.old_video_list)
    });
    return;
  }
}
//下面这几行控制点赞按钮的样式
function like() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numLike++;
  test.value.showLike = false;
}
function unlike() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numLike--;
  test.value.showLike = true;
}
function bookmark() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numBookmark++;
  test.value.showBookmark = false;
}
function unbookmark() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numBookmark--;
  test.value.showBookmark = true;
}
function forward() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numForward++;
  test.value.showForward = false;
}
function unforward() {
  if(!checkToken()){
    ElMessage.error("请登录再操作");
    return
  }
  test.value.numForward--;
  test.value.showForward = true;
}

//评论区
const commentbox = ref();
const black = ref();
function comment() {
  console.log(commentbox.value.style.right);
  commentbox.value.style.right = 0 + "px";
  black.value.style.display = "block";
}
// 关闭评论区
function closecom() {
  commentbox.value.style.right = -600 + "px";
  black.value.style.display = "none";
}

//获取video标签的dom
let video = ref();
// 定义当前时常秒数
const alltime = ref(0);
// 定义当前时长分钟数
const allt = ref(0);
//获取视频长度
// 视频总长度
const second = ref();
const minute = ref();
// 获取进度条的数值
const videonum = ref(0);

// 写进度条方法
const time = onMounted(() => {
  // 获取当前时间的方法
  video.value.onloadedmetadata = function () {
    const alltime = parseInt(video.value.duration);
    second.value = parseInt(alltime / 60);
    minute.value = parseInt(alltime % 60);
  };
  //

// 因为要时时显示时间我只能想到使用定时器完成代码
  const set = setInterval(() => {
    if (video.value&&video.value.currentTime > 0) {
      alltime.value = parseInt(video.value.currentTime % 60);
      allt.value = parseInt(video.value.currentTime / 60);
      videonum.value = parseInt(((video.value.currentTime)/(video.value.duration))*100);
    } 
    // 当视频完成播放时关闭计时器 这行代码有问题，完成播放之后代码的计时器不停止
    if ( video.value&&parseInt(video.value.currentTime) === parseInt(video.value.duration)) {
      console.log("?");
      clearInterval(set);
    }
  }, 10);
});


// 拖动进度条
  function changevideo(value){
    console.log(666)
    video.value.currentTime = (value/100)*video.value.duration ;
  }
//视频暂停播放
function pop() {
  if (video.value.paused) {
    test.value.isshow = true;
    video.value.play();
  } else if (video.value.played) {
    video.value.pause();
    test.value.isshow = false;
  }
}
// 点击视频控制暂停和播放
function stop() {
  if (video.value.paused) {
    test.value.isshow = true;
    video.value.play();
  } else if (video.value.played) {
    video.value.pause();
    test.value.isshow = false;
  }
}
// 视频全屏
function full() {
  console.log(video.value.duration);
  video.value.webkitRequestFullScreen();
}
//音量
// 一下这几行不会影响大局
let popbutton = ref();
const volumebutton = ref(0);
const num = ref(50);
const noise = computed(() => {
  return num.value / 100;
});



const nop = ref();
// 点击按钮切换上一个
function prev() {
  VideoNowIndex.value--;
}
// 点击按钮切换下一个
function next() {
  VideoNowIndex.value++;
}

onMounted(() => {
  document.onkeydown = function (event) {
    var key = window.event.keyCode;
    if (key == 38) {
      VideoNowIndex.value--;
    } else if (key == 40) {
      VideoNowIndex.value++;
    }else if(key == 32){
      stop();
    }
  };
});
// const demos = ref([
//   { url: demo },
//   { url: demo1 },
//   { url: demo2 },
//   { url: demo3 },
// ]);

const windowheight = ref();
windowheight.value = window.innerHeight - 150 + "px";
//--
//获得当前类型
const  getTypeVideo= (e)=>{
  clickType.value = e
  //重新请求视频
  // GetVideByTypeReq()
  VideoNowIndex.value--
}
//从vuex中获取token然后判断token是否失效，如果没有失去效果，不用登录
function checkToken(){
  let req = {token:""}
  let token  =  $store.state.Token
  if (token!==""){
    req.token = token
    $axios.post("/common/checkToken",req).then((res)=>{
      if(res.data.data === true){
        return true
      }else{
        return false
      }
    })
  }
}
</script>

<style scoped>
.box {
  position: relative;
  height: 100%;
}
.videobox {
  width: 100%;
  background-color: black;
  position: absolute;
  height: 100%;
}
.toolBox {
  width: 50px;
  height: 250px;
  position: absolute;
  right: 50px;
  top: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}

.toolBox div img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.toolBox div span {
  color: white;
}
.videoInfo {
  position: absolute;
  left: 40px;
  bottom: 100px;
  color: white;
}

.video {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}

.commentbox {
  height: 100%;
  width: 600px;
  background-color: white;
  position: absolute;
  right: -600px;
  top: 0px;
  transition: right 0.2s linear;
  z-index: 200;
  overflow: auto;
}

:deep(.slider-demo-block) {
  background-color: transparent !important;
}

::-webkit-scrollbar {
  display: none;
}
.progresscontrol {
  width: 70%;
  height: 20px;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.videocontrol {
  width: 70%;
  height: 40px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.videocontrol div {
  cursor: pointer;
}

.controlbutton {
  width: 50px;
}

.slider-demo-block {
  width: 100px;
  display: flex;
  align-items: center;
  background-color: white;
  margin-top: 10px;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.el-slider {
  --el-slider-button-size: 10px;
  --el-slider-main-bg-color:red;
}

.el-slider_bar {
  background-color: red;
}
:deep(.el-slider.is-vertical .el-slider__runway) {
  height: 100% !important;
}

.btn1,
.btn2 {
  width: 50px;
  height: 50px;
  background-color: white;
  line-height: 50px;
  text-align: center;
  position: absolute;
  font-size: 20px;
  cursor: pointer;
}

.btn1 {
  left: 210px;
  top: 45%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.btn2 {
  left: 210px;
  top: 55%;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.black {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0px;
  z-index: 100;
  display: none;
}

.commentsbackground {
  width: 100%;
  border-bottom: 1px solid rgb(210, 206, 206);
  padding: 20px 0;
}

/* 评论的内容 */
.comments1 {
  width: 400px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.heardername {
  font-size: 20px;
}

.headerimage {
  width: 50px;
  height: 50px;
}

.sort{
  width: 50px;
  height: 100px;
  background-color: white;
  position: absolute;
  top: 80px;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  writing-mode: vertical-rl;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.sortBox{
  width: 150px;
  height: 100%;
  background-color: rgb(74, 73, 73);
  position: absolute;
  display: flex;
  flex-direction: column;
  top:0px;
  text-align:center;
}

.sortBox div{
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(123, 120, 120);
  position: relative;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px 0;
  cursor: pointer;
}

@media (max-width: 600px) {
  .videobox {
    width: 500px;
    height: 600px;
    background: red;
  }
}
</style>